<!--案卷上报-->
<template>
  <page-meta
    :page-font-size="baseFontSize + 'rpx'"
    :root-font-size="baseFontSize + 'rpx'"
  ></page-meta>
  <view class="u-page flex flex-direction">
    <view class="addr flex align-center">
      <view>当前位置</view>
      <view class="location flex-sub text-right"
        >{{ formData.lng }},{{ formData.lat }}</view
      >
      <view class="refresh">刷新</view>
    </view>
    <scroll-view scroll-y class="form flex-sub main">
      <view class="section">
        <image src="/static/images/base.png"></image>
        <text>基础信息</text>
      </view>
      <uni-forms :modelValue="formData" border label-width="16rem">
        <uni-forms-item label="设施名称" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择设施"
            popup-title="请选择设施"
            :placeholderStyle="placeholderStyle"
            :localdata="dataTree1"
            v-model="device"
            :border="false"
            @change="onchange1"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害部位" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择病害部位"
            popup-title="请选择病害部位"
            :placeholderStyle="placeholderStyle"
            :localdata="dataTree2"
            v-model="diseaseLocation"
            :border="false"
            @change="onchange2"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害构件" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择病害构件"
            popup-title="请选择病害构件"
            :placeholderStyle="placeholderStyle"
            :localdata="dataTree3"
            @change="onchange3"
            v-model="brokenCommpont"
            :border="false"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害位置" name="name" :required="true">
          <map
            id="myMap"
            :scale="18"
            :latitude="formData.lat"
            :longitude="formData.lng"
            :markers="markers"
            :circles="circles"
            show-location
          ></map>
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="name" :required="true">
          <!-- <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
  <page-meta
    :page-font-size="baseFontSize + 'rpx'"
    :root-font-size="baseFontSize + 'rpx'"
  ></page-meta>
  <view class="u-page flex flex-direction">
    <view class="addr flex align-center">
      <view>当前位置</view>
      <view class="location flex-sub text-right"
        >{{ formData.lng }},{{ formData.lat }}</view
      >
      <view class="refresh">刷新</view>
    </view>
    <scroll-view scroll-y class="form flex-sub main">
      <view class="section">
        <image src="/static/images/base.png"></image>
        <text>基础信息</text>
      </view>
      <uni-forms :modelValue="formData" border label-width="16rem">
        <uni-forms-item label="设施名称" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择设施"
            popup-title="请选择设施"
            :placeholderStyle="placeholderStyle"
            :localdata="dataTree1"
            v-model="device"
            :border="false"
            @change="onchange1"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害部位" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择病害部位"
            popup-title="请选择病害部位"
            :placeholderStyle="placeholderStyle"
            :localdata="dataTree2"
            v-model="diseaseLocation"
            :border="false"
            @change="onchange2"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害构件" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择病害构件"
            popup-title="请选择病害构件"
            :placeholderStyle="placeholderStyle"
            :localdata="dataTree3"
            @change="onchange3"
            v-model="brokenCommpont"
            :border="false"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害位置" name="name" :required="true">
          <map
            id="myMap"
            :scale="18"
            :latitude="formData.lat"
            :longitude="formData.lng"
            :markers="markers"
            :circles="circles"
            show-location
          ></map>
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="name" :required="true">
          <!-- <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
						v-model="location" placeholder="请填写详细病害发生地址" /> -->
          {{ location || '暂未获取' }}
        </uni-forms-item>
        <uni-forms-item label="病害类型" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择病害类型"
            popup-title="请选择病害类型"
            :placeholderStyle="placeholderStyle"
            :localdata="typeList"
            v-model="brokenType"
            :border="false"
            @change="onchange"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害等级" name="name" :required="true">
          <song-data-picker
            placeholder="请选择病害等级"
            popup-title="请选择病害等级"
            :placeholderStyle="placeholderStyle"
            :localdata="levelList"
            v-model="brokenLevel"
            :border="false"
            @change="onchange"
          ></song-data-picker>
        </uni-forms-item>
        <!-- <uni-forms-item label="安全等级" name="name">
          {{ location || '暂未获取' }}
        </uni-forms-item>
        <uni-forms-item label="病害类型" name="name" :required="true">
          <song-data-picker
            openSearch
            placeholder="请选择病害类型"
            popup-title="请选择病害类型"
            :placeholderStyle="placeholderStyle"
            :localdata="typeList"
            v-model="brokenType"
            :border="false"
            @change="onchange"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="病害等级" name="name" :required="true">
          <song-data-picker
            placeholder="请选择病害等级"
            popup-title="请选择病害等级"
            :placeholderStyle="placeholderStyle"
            :localdata="levelList"
            v-model="brokenLevel"
            :border="false"
            @change="onchange"
          ></song-data-picker>
        </uni-forms-item>
        <!-- <uni-forms-item label="安全等级" name="name">
          <song-data-picker
            placeholder="请选择安全等级"
            popup-title="请选择安全等级"
            :placeholderStyle="placeholderStyle"
            :localdata="safeList"
            v-model="safeLevel"
            :border="false"
            @change="onchange"
          ></song-data-picker>
        </uni-forms-item> -->
        <uni-forms-item label="病害描述">
          <uni-easyinput
            type="textarea"
            :placeholderStyle="placeholderStyle"
            :inputBorder="false"
            v-model="formData.dealRemark"
            placeholder="请输入病害描述"
          />
        </uni-forms-item>
        <uni-forms-item label="病害损害面积(m2)">
          <uni-easyinput
            type="number"
            :step="0.01"
            :precision="2"
            :min="0"
            :placeholderStyle="placeholderStyle"
            :inputBorder="false"
            v-model="formData.area"
            placeholder="请输入病害损害面积(m2)"
          />
        </uni-forms-item>
        <uni-forms-item label="上传照片" name="name" :required="true">
          <!-- <upload></upload> -->
          <view class="preview-list">
            <view class="preview-item" v-for="(item, index) in fileList" :key="index">
              <image
                style="width: 120upx; height: 120upx"
                :src="item"
                @click="previewImage(fileList, index)"
              ></image>
              <uni-icons
                class="delete-icon"
                @click="removeImg(index)"
                type="closeempty"
                size="10"
              ></uni-icons>
            </view>
            <view class="upload-btn-area"
              ><image
                v-if="fileList.length < 9"
                @click="chooseImage"
                src="/static/images/upload.png"
                mode="widthFix"
              ></image
            ></view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="处置建议" name="name" :required="true">
          <song-data-picker
            placeholder="请选择处置建议"
            popup-title="请选择处置建议"
            :placeholderStyle="placeholderStyle"
            :localdata="dealList"
            v-model="dealMsg"
            :border="false"
            @change="onchange"
          ></song-data-picker>
        </uni-forms-item>
        <uni-forms-item label="道路开挖或列单项工程" v-if="tenantId == 144">
          <switch :checked="formData.isAdminAuth" @change="switchAuthChange" />
        </uni-forms-item>
        <uni-forms-item label="处置备注">
          <uni-easyinput
            type="textarea"
            :placeholderStyle="placeholderStyle"
            :inputBorder="false"
            v-model="formData.checkMark"
            placeholder="请输入处置备注"
          />
        </uni-forms-item>
      </uni-forms>
    </scroll-view>
    <view class="page-footer">
      <button
        @click="submitBtn"
        class="save-btn cu-btn block bg-blue lg"
        :disabled="isSubmiting"
        type="blue"
      >
        <uni-icons type="spinner-cycle" size="20" v-if="isSubmiting"></uni-icons>
        提交
      </button>
    </view>
  </view>
</template>

<script>
import upload from '@/components/upload.vue';
import {
  getFacilityManagePage,
  getKgPlaceTypePage,
  getFacilityComponentPage
} from '@/api/system/caseManage.js';
import { createProjectCaseApi } from '@/api/system/changxiao.js';
import { getDiseaseTypeListApi, getDiseaseListApi } from '@/api/common.js';
import { getUserProfile } from '@/api/system/user.js';
import QQMapWX from '../../utils/qqmap-wx-jssdk.min';
export default {
  components: {
    upload
  },
  data() {
    return {
      facilityId: null,
      formData: {
        lat: 30.54251,
        lng: 119.977401,
        dealRemark: '',
        checkMark: '',
        isAdminAuth: false
      },
      placeholderStyle: {
        fontSize: '14px'
      },
      markers: [],
      dataTree1: [],
      dataTree2: [],
      dataTree3: [],
      dataTree: [
        {
          text: '一年级',
          value: '1-0'
        }
      ],
      device: null,
      diseaseLocation: null,
      brokenCommpont: null,
      location: '',
      brokenType: null,
      brokenLevel: null,
      typeList: [],
      levelList: [],
      dealList: [],
      dealMsg: '1',
      userObj: {},
      safeLevel: null,
      safeList: [],
      city: '',
      zone: '',
      province: '',
      fileList: [],
      isChange: false,
      circles: [
        {
          latitude: 30.31974,
          longitude: 120.1421,
          radius: 100,
          fillColor: '#AACCEE32',
          color: '#AACCEE',
          strokeWidth: 2
        }
      ],
      patrolList: [],
      isSubmiting: false, //是否正在提交
      tenantId: null
    };
  },
  computed: {
    baseFontSize() {
      return this.$store.getters.fontSize;
    }
  },
  created() {
    // 获取位置
    this.startLocationUpdate();
    this.getDataTree1();
    // this.getDiseaseTypeList()
    this.getDiseaseLevelList();
    this.getDiseaseDealList();
    this.getDiseaseSafeList();
    this.getUser();
    this.tenantId = uni.getStorageSync('TenantId');
  },
  methods: {
    switchAuthChange(e) {
      this.formData.isAdminAuth = e.detail.value;
    },
    previewImage(photoImg, index) {
      uni.previewImage({
        current: index,
        urls: photoImg
      });
    },
    onchange(e) {
      console.log(e);
    },
    chooseImage() {
      uni.chooseImage({
        count: 9,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.uploadImage(tempFilePaths);
        }
      });
    },
    uploadImage(images) {
      const count = images.length;
      let currentIndex = 0;
      for (let i = 0; i < count; i++) {
        uni.uploadFile({
          url: 'https://ruoyi.51wephone.cn/admin-api/infra/file/upload', //上传接口地址
          filePath: images[i],
          name: 'file',
          formData: {},
          header: {
            Authorization: `Bearer ${uni.getStorageSync('ACCESS_TOKEN')}`
          },
          success: (res) => {
            currentIndex++;
            const data = JSON.parse(res.data);
            if (currentIndex >= count) {
              uni.showToast({
                title: '上传成功',
                icon: 'success',
                duration: 2000
              });
            }
            this.fileList.push(JSON.parse(res.data).data);
          }
        });
      }
    },
    removeImg(index) {
      this.fileList.splice(index, 1);
    },
    // 计算距离
    distanceCalculation(log, lat) {
      // console.log(log)
      // console.log(lat)
      let patrolList = this.patrolList;
      if (patrolList.length > 0) {
        patrolList.map((item, index) => {
          item.distance = util.getDistance(log, lat, item.longitude, item.latitude);
          if (this.distance >= item.distance) {
            //  isDone==0 打点
            if (!item.isDone) {
              this.getDot(item, index);
            }
          }
        });
      }
    },
    // 地址解析
    getAddress(log, lat) {
      let qqmapsdk = new QQMapWX({
        key: 'EWNBZ-4PZWG-XUJQK-QQM5S-V74B2-QQBA5'
      });
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: lat,
          longitude: log
        },
        success: (res) => {
          if (res.status == 0) {
            console.log(
              '%c [ res ]-319',
              'font-size:13px; background:pink; color:#bf2c9f;',
              res
            );
            this.location = `${res.result.address}-${res.result.formatted_addresses.recommend}`;
            let { province, city, district: zone } = res.result.address_component;
            this.city = city;
            this.province = province;
            this.zone = zone;
            // this.setData({
            //   'form.locationdDescribe': `${res.result.address}-${res.result.formatted_addresses.recommend}`
            // });
          }
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    startLocationUpdate() {
      uni.startLocationUpdate({
        success: (res) => {
          //成功的逻辑
          uni.onLocationChange((data) => {
            console.log(
              '%c [ data ]-243',
              'font-size:13px; background:pink; color:#bf2c9f;',
              data
            );
            // this.city = data.city || ''
            // this.province = data.province || ''
            // this.zone = data.district || ''
            let latitude = data.latitude.toFixed(6);
            let longitude = data.longitude.toFixed(6);
            this.formData.lat = latitude || '';
            this.formData.lng = longitude || '';

            this.circles[0].longitude = longitude;
            this.circles[0].latitude = latitude;
            this.distanceCalculation(longitude, latitude);
            if (!this.isChange) {
              this.isChange = true;
              this.getAddress(longitude, latitude);
            }
            //获取当前时间
            var currentTime = new Date().getTime();
            //获取上次保存的位置信息
            var oldLocation = wx.getStorageSync('oldLocation');
            //将经纬度拼接
            var newLocation = latitude + '' + longitude;
            //获取上次执行的时间
            var oldTime = wx.getStorageSync('oldTime');
            if (oldLocation != newLocation && currentTime - oldTime > 20000) {
              //缓存当前最新位置
              wx.setStorageSync('oldLocation', newLocation);
              //缓存当前执行的时间
              wx.setStorageSync('oldTime', currentTime);
              this.getAddress(longitude, latitude);
            }
          });
        },
        fail: (err) => {
          console.log(err);
          //失败的逻辑
          //1.wx.showModal引导用户授权
          //2.通过wx.openSetting让用户开启权限
          uni.showModal({
            //引导用户授权
            title: '提示',
            content: '请打开定位权限',
            confirmText: '设置',
            cancelText: '取消',
            showCancel: false,
            success: (res) => {
              //点击“确认”时打开设置页面
              if (res.confirm) {
                uni.openSetting({
                  //打开设置页面让用户选择权限
                  success: (res) => {
                    console.log(res);
                    if (res.authSetting['scope.userLocation'] == true) {
                      uni.onLocationChange((data) => {
                        //实时获取用户最新的经纬度信息
                        console.log(data);
                      });
                    }
                  }
                });
              } else {
                //取消打开设置授权页面
                uni.showToast({
                  title: '取消授权',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    getUser() {
      getUserProfile().then((res) => {
        this.userObj = res.data;
      });
    },
    // 处置建议
    getDiseaseDealList() {
      getDiseaseListApi({
        pageNo: 1,
        pageSize: 100,
        dictType: 'deal_type'
      }).then((res) => {
        this.dealList = res.data.list.map((item) => {
          return {
            ...item,
            text: item.label,
            value: item.value
          };
        });
      });
    },
    // 病害等级
    getDiseaseLevelList() {
      getDiseaseListApi({
        pageNo: 1,
        pageSize: 100,
        dictType: 'broken_level_type'
      }).then((res) => {
        this.levelList = res.data.list.map((item) => {
          return {
            ...item,
            text: item.label,
            value: item.value
          };
        });
      });
    },
    // 安全等级
    getDiseaseSafeList() {
      getDiseaseListApi({
        pageNo: 1,
        pageSize: 100,
        dictType: 'xcjk_case_safe_level'
      }).then((res) => {
        this.safeList = res.data.list.map((item) => {
          return {
            ...item,
            text: item.label,
            value: item.value
          };
        });
      });
    },
    // 病害类型
    getDiseaseTypeList(componentTypeId) {
      getDiseaseTypeListApi({
        pageNo: 1,
        pageSize: 10000,
        componentTypeId
      }).then((res) => {
        this.typeList = res.data.list.map((item) => {
          return {
            ...item,
            text: item.diseaseName,
            value: item.diseaseTypeId
          };
        });
      });
    },
    submitBtn() {
      if (this.isSubmiting) {
        return;
      }
      let brokenTypeName = ''; // 类型名称
      let facilityName = ''; // 设施名称
      let diseaseLocationName = '';
      let brokenCommpontName = '';
      if (this.brokenType) {
        const result = this.typeList.filter((item) => {
          return item.value == this.brokenType;
        });
        console.log(result);
        brokenTypeName = result[0].text;
      }
      if (this.device) {
        const result = this.dataTree1.filter((item) => {
          return item.value == this.device;
        });
        facilityName = result[0].text;
      }
      if (this.diseaseLocation) {
        const result = this.dataTree2.filter((item) => {
          return item.value == this.diseaseLocation;
        });
        diseaseLocationName = result[0].text;
      }
      if (this.brokenCommpont) {
        const result = this.dataTree3.filter((item) => {
          return item.value == this.brokenCommpont;
        });
        brokenCommpontName = result[0].text;
      }
      if (!facilityName) {
        uni.showToast({
          title: '请选设施',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      if (!diseaseLocationName) {
        uni.showToast({
          title: '请选部位',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      if (!brokenCommpontName) {
        uni.showToast({
          title: '请选构件',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      if (!brokenTypeName) {
        uni.showToast({
          title: '请选病害',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      if (!this.brokenLevel) {
        uni.showToast({
          title: '请选病害等级',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      // if (!this.formData.dealRemark) {
      //   uni.showToast({
      //     title: '请填病害描述',
      //     icon: 'error',
      //     duration: 2000
      //   });
      //   return;
      // }
      if (this.formData.area) {
        if (isNaN(this.formData.area)) {
          uni.showToast({
            title: '病害面积必须是数字',
            icon: 'none',
            duration: 2000
          });
          return;
        }
      }
      if (!this.fileList.length) {
        uni.showToast({
          title: '请传图片',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      if (!this.dealMsg) {
        uni.showToast({
          title: '请选建议',
          icon: 'error',
          duration: 2000
        });
        return;
      }
      this.isSubmiting = true;
      createProjectCaseApi({
        caseSource: '0',
        belongTo: String(this.device),
        facilityName: String(facilityName),
        diseaseLocation: String(this.diseaseLocation),
        diseaseLocationName: String(diseaseLocationName),
        brokenCommpont: String(this.brokenCommpont),
        brokenCommpontName: String(brokenCommpontName),
        location: String(this.location),
        lng: String(this.formData.lng),
        lat: String(this.formData.lat),
        brokenType: this.brokenType,
        brokenTypeName: String(brokenTypeName),
        brokenLevel: String(this.brokenLevel),
        brokenDesc: String(this.formData.dealRemark),
        dealRemark: String(this.formData.checkMark),
        area: this.formData.area,
        dealMsg: String(this.dealMsg),
        safeLevel: String(this.safeLevel),
        lnglat: `${this.formData.lng},${this.formData.lat}`,
        reportName: String(this.userObj.nickname),
        brokenImg: this.fileList.toString(),
        city: this.city,
        zone: this.zone,
        province: this.province,
        isAdminAuth: this.formData.isAdminAuth
      })
        .then((res) => {
          uni.showToast({
            title: '操作成功',
            icon: 'success',
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        })
        .finally(() => {
          this.isSubmiting = false;
        });
    },
    async getDataTree1() {
      const res = await getFacilityManagePage({
        pageNo: 1,
        pageSize: 10000,
        longitude: this.formData.lng,
        latitude: this.formData.lat
      });
      this.dataTree1 = res.data.list?.map((item) => ({
        ...item,
        text: item.facilityName,
        value: item.id
      }));
    },
    onchange1(e) {
      const current = this.dataTree1.find(
        (item) => item.value === e.detail.value[0]?.value
      );
      this.facilityId = current.id;
      this.getDataTree2(current?.facilityType);
    },
    async getDataTree2(facilityTypeId) {
      const res = await getKgPlaceTypePage({
        pageNo: 1,
        pageSize: 10000,
        facilityTypeId
      });
      this.dataTree2 = res.data.list?.map((item) => ({
        ...item,
        text: item.placeName,
        value: item.placeTypeId
      }));
    },
    onchange2(e) {
      const current = this.dataTree2.find(
        (item) => item.value === e.detail.value[0]?.value
      );
      console.log(
        '%c [ current ]-568',
        'font-size:13px; background:pink; color:#bf2c9f;',
        current
      );
      this.getDataTree3(current?.placeName);
    },
    async getDataTree3(partName) {
      const res = await getFacilityComponentPage({
        pageNo: 1,
        pageSize: 10000,
        longitude: this.formData.lng,
        latitude: this.formData.lat,
        partName,
        facilityId: this.facilityId
      });
      this.dataTree3 = res.data.list?.map((item) => ({
        ...item,
        text: item.compName,
        value: item.id
      }));
    },
    onchange3(e) {
      const current = this.dataTree3.find(
        (item) => item.value === e.detail.value[0]?.value
      );
      this.getDiseaseTypeList(current?.componentType);
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  rad(d) {
    return (d * Math.PI) / 180;
  },
  /**
   * 生命周期函数--监听页面显示
   */
  rad(d) {
    return (d * Math.PI) / 180;
  },

  getDistance(lng1, lat1, lng2, lat2) {
    var radLat1 = this.rad(lat1);
    var radLat2 = this.rad(lat2);
    var a = radLat1 - radLat2;
    var b = this.rad(lng1) - this.rad(lng2);
    var s =
      2 *
      Math.asin(
        Math.sqrt(
          Math.pow(Math.sin(a / 2), 2) +
            Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
        )
      );
    s = s * 6378.137; //地球半径
    s = Math.round(s * 10000) / 10000;
    return s; //返回数值单位：公里
  },
  getDistance(lng1, lat1, lng2, lat2) {
    var radLat1 = this.rad(lat1);
    var radLat2 = this.rad(lat2);
    var a = radLat1 - radLat2;
    var b = this.rad(lng1) - this.rad(lng2);
    var s =
      2 *
      Math.asin(
        Math.sqrt(
          Math.pow(Math.sin(a / 2), 2) +
            Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
        )
      );
    s = s * 6378.137; //地球半径
    s = Math.round(s * 10000) / 10000;
    return s; //返回数值单位：公里
  },

  // 打点
  getDot(item, index) {
    let data = {
      id: item.id,
      userName: uni.getStorageSync('userInfo').accountName,
      userUuid: uni.getStorageSync('userInfo').accountUuid,
      isDone: 1
    };
    http.wxRequest(
      'POST',
      '/temporary/doPatrol',
      data,
      (res) => {
        if (res.errcode == 0) {
          Toast({
            type: 'text',
            message: '打点成功',
            duration: 1500,
            forbidClick: true,
            onClose: () => {
              // this.getTemporaryByCuringUtil()
            }
          });
        } else {
          Toast({
            type: 'text',
            message: res.errmsg,
            duration: 1500,
            forbidClick: true
          });
        }
      },
      (err) => {
        console.log(err);
      }
    );
  }
};
</script>
<style lang="scss">
page {
  height: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
@import '@/static/scss/form.scss';
.u-page {
  font-size: 2.8rem;
  font-size: 2.8rem;
}
.preview-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  .upload-btn-area {
    width: 120upx;
    height: 120upx;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1upx dashed #f2f2f2;
    border-radius: 12upx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .upload-btn-area {
      width: 120upx;
      height: 120upx;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1upx dashed #f2f2f2;
      border-radius: 12upx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.uni-icons) {
        font-size: 80upx !important;
      }
    }
    :deep(.uni-icons) {
      font-size: 80upx !important;
    }
  }
}
.preview-item {
  box-sizing: border-box;
  width: 120upx;
  height: 120upx;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  box-sizing: border-box;
  width: 120upx;
  height: 120upx;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;

  .delete-icon {
    position: absolute;
    right: -8upx;
    top: -8upx;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 8upx;
    .delete-icon {
      position: absolute;
      right: -8upx;
      top: -8upx;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      padding: 8upx;

      .uni-icons {
        font-size: 30upx !important;
      }
    }
    .uni-icons {
      font-size: 30upx !important;
    }
  }
}
/deep/ .tab-c {
  padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 50rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 50rpx);
}
</style>
